React useSyncExternalStore: Dominando a Sincronização de Estado Externo

useSyncExternalStore é um hook do React introduzido no React 18 que permite que você se inscreva e leia de fontes de dados externas de uma maneira compatível com a renderização concorrente. Este hook preenche a lacuna entre o estado gerenciado pelo React e o estado externo, como dados de bibliotecas de terceiros, APIs do navegador ou outros frameworks de UI. Vamos mergulhar fundo para entender seu propósito, implementação e benefícios.

Entendendo a Necessidade do useSyncExternalStore

O gerenciamento de estado nativo do React (useState, useReducer, Context API) funciona excepcionalmente bem para dados fortemente acoplados à árvore de componentes do React. No entanto, muitas aplicações precisam se integrar com fontes de dados *fora* do controle do React. Essas fontes externas podem incluir:

• Bibliotecas de gerenciamento de estado de terceiros: Integração com bibliotecas como Zustand, Jotai ou Valtio.
• APIs do Navegador: Acesso a dados do localStorage, IndexedDB ou da API de Informações de Rede.
• Dados buscados de servidores: Embora bibliotecas como React Query e SWR sejam frequentemente preferidas, às vezes você pode querer controle direto.
• Outros frameworks de UI: Em aplicações híbridas onde o React coexiste com outras tecnologias de UI.

Ler e escrever diretamente nessas fontes externas dentro de um componente React pode levar a problemas, particularmente com a renderização concorrente. O React pode renderizar um componente com dados desatualizados se a fonte externa mudar enquanto o React está preparando uma nova tela. O useSyncExternalStore resolve esse problema fornecendo um mecanismo para o React sincronizar com segurança com o estado externo.

Como o useSyncExternalStore Funciona

O hook useSyncExternalStore aceita três argumentos:

1. subscribe: Uma função que aceita um callback. Este callback será invocado sempre que o store externo mudar. A função deve retornar uma função que, quando chamada, cancela a inscrição do store externo.
2. getSnapshot: Uma função que retorna o valor atual do store externo. O React usa esta função para ler o valor do store durante a renderização.
3. getServerSnapshot (opcional): Uma função que retorna o valor inicial do store externo no servidor. Isso só é necessário para renderização no lado do servidor (SSR). Se não for fornecido, o React usará getSnapshot no servidor.

O hook retorna o valor atual do store externo, obtido da função getSnapshot. O React garante que o componente renderize novamente sempre que o valor retornado por getSnapshot mudar, conforme determinado pela comparação Object.is.

Exemplo Básico: Sincronizando com o localStorage

Vamos criar um exemplo simples que usa o useSyncExternalStore para sincronizar um valor com o localStorage.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

Neste exemplo:

• subscribe: Escuta o evento storage no objeto window. Este evento é disparado sempre que o localStorage é modificado por outra aba ou janela.
• getSnapshot: Recupera o valor de myValue do localStorage.
• getServerSnapshot: Retorna um valor padrão para renderização no lado do servidor. Isso poderia ser recuperado de um cookie se o usuário já tivesse definido um valor anteriormente.
• MyComponent: Usa useSyncExternalStore para se inscrever em mudanças no localStorage e exibir o valor atual.

Casos de Uso Avançados e Considerações

1. Integrando com Bibliotecas de Gerenciamento de Estado de Terceiros

useSyncExternalStore brilha ao integrar componentes React com bibliotecas de gerenciamento de estado externas. Vejamos um exemplo usando Zustand:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

Neste exemplo, useSyncExternalStore é usado para se inscrever em mudanças no store do Zustand. Note como passamos useStore.subscribe e useStore.getState diretamente para o hook, tornando a integração perfeita.

2. Otimizando a Performance com Memoização

Como getSnapshot é chamada em cada renderização, é crucial garantir que ela seja performática. Evite computações caras dentro de getSnapshot. Se necessário, memorize o resultado de getSnapshot usando useMemo ou técnicas semelhantes.

Considere este exemplo (potencialmente problemático):

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

Neste exemplo, getSnapshot (a função inline passada como segundo argumento para useSyncExternalStore) realiza uma operação de map cara em um array grande. Esta operação será executada em *cada* renderização, mesmo que os dados subjacentes não tenham mudado. Para otimizar isso, podemos memorizar o resultado:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

Agora, a operação map é realizada apenas quando externalStore.getState() muda. Nota: na verdade, você precisará fazer uma comparação profunda de externalStore.getState() ou usar uma estratégia diferente se o store mutar o mesmo objeto. O exemplo é simplificado para demonstração.

3. Lidando com a Renderização Concorrente

O principal benefício do useSyncExternalStore é sua compatibilidade com os recursos de renderização concorrente do React. A renderização concorrente permite que o React prepare várias versões da UI simultaneamente. Quando o store externo muda durante uma renderização concorrente, o useSyncExternalStore garante que o React sempre use os dados mais atualizados ao aplicar as mudanças no DOM.

Sem o useSyncExternalStore, os componentes podem renderizar com dados desatualizados, levando a inconsistências visuais e comportamento inesperado. O método getSnapshot do useSyncExternalStore é projetado para ser síncrono e rápido, permitindo que o React determine rapidamente se o store externo mudou durante a renderização.

4. Considerações sobre Renderização no Lado do Servidor (SSR)

Ao usar useSyncExternalStore com renderização no lado do servidor, é essencial fornecer a função getServerSnapshot. Esta função é usada para recuperar o valor inicial do store externo no servidor. Sem ela, o React tentará usar getSnapshot no servidor, o que pode não ser possível se o store externo depender de APIs específicas do navegador (por exemplo, localStorage).

A função getServerSnapshot deve retornar um valor padrão ou recuperar os dados de uma fonte do lado do servidor (por exemplo, cookies, banco de dados). Isso garante que o HTML inicial renderizado no servidor contenha os dados corretos.

5. Tratamento de Erros

Um tratamento de erros robusto é crucial, especialmente ao lidar com fontes de dados externas. Envolva as funções getSnapshot e getServerSnapshot em blocos try...catch para lidar com possíveis erros. Registre os erros adequadamente e forneça valores de fallback para evitar que a aplicação quebre.

6. Hooks Personalizados para Reutilização

Para promover a reutilização de código, encapsule a lógica do useSyncExternalStore dentro de um hook personalizado. Isso torna mais fácil compartilhar a lógica entre múltiplos componentes.

Por exemplo, vamos criar um hook personalizado para acessar uma chave específica no localStorage:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

Agora, você pode usar facilmente este hook em qualquer componente:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

Melhores Práticas

• Mantenha o getSnapshot Rápido: Evite computações caras na função getSnapshot. Memorize o resultado se necessário.
• Forneça getServerSnapshot para SSR: Garanta que o HTML inicial renderizado no servidor contenha os dados corretos.
• Use Hooks Personalizados: Encapsule a lógica do useSyncExternalStore em hooks personalizados para melhor reutilização e manutenibilidade.
• Trate Erros com Elegância: Envolva getSnapshot e getServerSnapshot em blocos try...catch.
• Minimize as Subscrições: Inscreva-se apenas nas partes do store externo que o componente realmente precisa. Isso reduz renderizações desnecessárias.
• Considere Alternativas: Avalie se o useSyncExternalStore é realmente necessário. Para casos simples, outras técnicas de gerenciamento de estado podem ser mais apropriadas.

Alternativas ao useSyncExternalStore

Embora o useSyncExternalStore seja uma ferramenta poderosa, nem sempre é a melhor solução. Considere estas alternativas:

• Gerenciamento de Estado Nativo (useState, useReducer, Context API): Se os dados estão fortemente acoplados à árvore de componentes do React, estas opções nativas são frequentemente suficientes.
• React Query/SWR: Para busca de dados, estas bibliotecas fornecem excelentes capacidades de cache, invalidação e tratamento de erros.
• Zustand/Jotai/Valtio: Estas bibliotecas minimalistas de gerenciamento de estado oferecem uma maneira simples e eficiente de gerenciar o estado da aplicação.
• Redux/MobX: Para aplicações complexas com estado global, Redux ou MobX podem ser uma escolha melhor (embora introduzam mais boilerplate).

A escolha depende dos requisitos específicos da sua aplicação.

Conclusão

useSyncExternalStore é uma adição valiosa ao kit de ferramentas do React, permitindo a integração perfeita com fontes de estado externas enquanto mantém a compatibilidade com a renderização concorrente. Ao entender seu propósito, implementação e casos de uso avançados, você pode alavancar este hook para construir aplicações React robustas e performáticas que interagem eficazmente com dados de várias fontes.

Lembre-se de priorizar a performance, tratar erros com elegância e considerar soluções alternativas antes de recorrer ao useSyncExternalStore. Com planejamento e implementação cuidadosos, este hook pode aumentar significativamente a flexibilidade e o poder de suas aplicações React.

Exploração Adicional

• Documentação do React para useSyncExternalStore
• Exemplos com várias bibliotecas de gerenciamento de estado (Zustand, Jotai, Valtio)
• Benchmarks de performance comparando useSyncExternalStore com outras abordagens